
<template>
  <!-- 所有品牌页--品牌入驻页面 -->
  <div v-show="allBrandPopBoolPprz" class="model-box" @click.stop="closeModel1">
    <div class="con-box" @click.stop="didi">
      <h5>品牌入驻</h5>
      <div class="con-body">
        <div class="ppmc">
          <span class="btf">品牌名称<i>*</i></span>
          <el-input v-model="input" placeholder="请输入品牌名称" clearable class="pp-input">1</el-input>
        </div>
        <div class="pp-logo">
          <span class="btf">品牌LOGO<i>*</i></span>
          <div class="img-up-load">
            <p>支持 png、jpg、JPEG格式，5M以内</p>
            <div class="up-load-box">
              <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                :disabled="disabledVal"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </div>
          </div>
        </div>
      </div>
      <div class="con-footer">
        <button @click="ljrz">立即入驻</button>
        <button @click="quxiao">取消</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: '',
      imageUrl: '',
      // 是否禁用上传
      disabledVal: false
    }
  },
  computed: {
    allBrandPopBoolPprz() {
      return this.$store.state.template1.allBrandPopBoolPprz
    }
  },
  methods: {
    closeModel1() {
      this.$store.commit('template1/allBrandPopBoolPprz', false)
    },
    didi() {

    },
    ljrz() {
      const success = 'yes'
      if (success === 'yes') {
        this.$store.commit('template1/allBrandPopBoolPprz', false)
        this.$store.commit('template1/checkSeccess', true)
      } else if (success === 'has') {
        this.$store.commit('template1/allBrandPopBoolPprz', false)
        this.$store.commit('template1/claimPopBool', true)
      } else {
        this.$store.commit('template1/allBrandPopBoolPprz', false)
        this.$store.commit('template1/repeatPopBool', true)
      }
    },
    quxiao() {
      this.$store.commit('template1/allBrandPopBoolPprz', false)
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      console.log('图片上传触发')
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>

<style lang="scss" scoped>
.model-box{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  padding-top: 200px;
  color: #333;
  z-index: 99;
  >.con-box{
    position: relative;
    width: 670px;
    height: 462px;
    margin: 0 auto;
    background-color: #fff;
    >h5{
      font-size: 24px;
      height: 72px;
      line-height: 72px;
      text-align: center;
      border-bottom: 1px solid #ECECEC;
      margin-bottom: 40px;
    }
    >.con-body{
      padding-left: 51px;
      margin-bottom: 30px;
      >div{
        >span{
          font-size: 16px;
          color: #333;
          position: relative;
          padding-right: 57px;
        }
        >.btf{
          >i{
            color: #D6000F;
          }
        }
      }
      >.ppmc{
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 24px;
        >.pp-input{
          width: 380px;
          height: 40px;
        }
      }
      >.pp-logo{
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: flex-start;
        >span{
          height: 21px;
        }
        >.img-up-load{
          >p{
            font-size: 14px;
            color: #999;
            margin-bottom: 14px;
          }
          >.up-load-box{
            width: 232px;
            height: 132px;
            border: 1px dotted #E9E9E9;
            border-radius: 4px;
            padding: 13px 22px;
          }
        }
      }
    }
    >.con-footer{
      width: 458px;
      margin: 0 auto;
      padding-left: 77px;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 50px;
      >button{
        width: 170px;
        height: 42px;
        line-height: 42px;
        font-size: 18px;
        border-radius: 4px;
        cursor: pointer;
      }
      >button:first-child{
        background-color: #417AEF;
        color: #fff;
      }
      >button:last-child{
        background-color: transparent;
        color: #666;
        border: 1px solid #666;
      }
    }
  }
}

/* element的 */
.avatar-uploader{
  width: 100%;
  height: 104px;
  text-align: center;
  position: relative;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload .el-icon-plus:before{
    position: absolute;
    top: 35px;
    left: 74px;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    text-align: center;
  }
  .avatar {
    max-width: 185px;
    max-height: 104px;
    display: block;
  }
</style>

